<template>
  <view class="match-list">
    <view class="header flex flex-between font-bold">
      <view>{{ matchProcess }}</view>
    </view>
    <block v-for="(matchItem, index) in groupInfoData.matchInfos" :key="matchItem.id">
      <matchListItem :matchItem="matchItem"></matchListItem>
    </block>
  </view>
</template>
<script setup lang="ts">
import { Group, EventToPlayer, Stage } from '@/championship'
import { EventTypeText, MatchStatusEnum, MatchStatusText, StageTypeText } from '@/common/enum'
import { ref, defineProps } from 'vue'
import matchListItem from './matchListItem.vue'
const props = defineProps<{
  groupInfo: Group
  players: EventToPlayer[]
  stageInfo: Stage
}>()
const { groupInfo, players } = props
const groupInfoData = ref(groupInfo)
const matchProcess = ref('')
const getPlayerName = (matchItem) => {
  const { homePlayer, awayPlayer, isTeamMatch, subMatchInfos } = matchItem
  const homePlayerInfo = homePlayer
  const awayPlayerInfo = awayPlayer
  if (homePlayerInfo) {
    homePlayerInfo.team = homePlayerInfo.teamName ? { name: homePlayerInfo.teamName } : null
    homePlayerInfo.player = homePlayerInfo.player1Name ? { name: homePlayerInfo.player1Name } : null
    homePlayerInfo.player2 = homePlayerInfo.player2Name
      ? { name: homePlayerInfo.player2Name }
      : null
  }
  if (awayPlayerInfo) {
    awayPlayerInfo.team = awayPlayerInfo.teamName ? { name: awayPlayerInfo.teamName } : null
    awayPlayerInfo.player = awayPlayerInfo.player1Name ? { name: awayPlayerInfo.player1Name } : null
    awayPlayerInfo.player2 = awayPlayerInfo.player2Name
      ? { name: awayPlayerInfo.player2Name }
      : null
  }

  let homePlayerName = ''
  let awayPlayerName = ''
  if (isTeamMatch && subMatchInfos?.length) {
    homePlayerName = homePlayerInfo?.team?.name || homePlayerInfo.teamName
    awayPlayerName = awayPlayerInfo?.team?.name || awayPlayerInfo.teamName
  } else {
    homePlayerName = [
      // homePlayerInfo?.team?.name && `(${homePlayerInfo?.team?.name})`,
      homePlayerInfo?.player?.name || homePlayerInfo?.player1Name,
      homePlayerInfo?.player2?.name || homePlayerInfo?.player2Name || '',
    ]
      .filter((v) => !!v)
      .join(' ')
    awayPlayerName = [
      // awayPlayerInfo?.team?.name && `(${awayPlayerInfo?.team?.name})`,
      awayPlayerInfo?.player?.name || awayPlayerInfo?.player1Name,
      awayPlayerInfo?.player2?.name || awayPlayerInfo?.player2Name || '',
    ]
      .filter((v) => !!v)
      .join(' ')
  }
  matchItem.homePlayerName = homePlayerName
  matchItem.awayPlayerName = awayPlayerName
}
watchEffect(() => {
  console.log('groupInfo changed:', props.groupInfo)
  groupInfoData.value = props.groupInfo
  // 在这里可以进行任何需要在 groupInfo 变化时执行的操作
  let totalMatchCount = 0
  let finishedMatchCount = 0
  let matchLoopCount = 0
  groupInfoData.value.matchInfos.forEach((matchItem) => {
    const { type } = matchItem
    getPlayerName(matchItem)
    matchItem.matchTypeText = EventTypeText[type]
    matchItem.groupName = groupInfo.name
    matchItem.stageName = StageTypeText[props.stageInfo.type]
    if (matchItem.groupLoopIndex > matchLoopCount) {
      matchLoopCount = matchItem.groupLoopIndex
    }
    if (matchItem.subMatchInfos?.length) {
      matchItem.subMatchInfos.forEach((subMatchItem) => {
        getPlayerName(subMatchItem)
        subMatchItem.matchTypeText = EventTypeText[type]
        subMatchItem.groupName = groupInfo.name
        totalMatchCount++
        if (subMatchItem.status === MatchStatusEnum.Finished) {
          finishedMatchCount++
        }
      })
    } else {
      totalMatchCount++
      if (matchItem.status === MatchStatusEnum.Finished) {
        finishedMatchCount++
      }
    }
  })
  matchProcess.value = `共${finishedMatchCount}/${totalMatchCount}场 共${matchLoopCount}轮`
})
</script>
